
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            margin: 0 auto;
            width: 80%;
            text-align: center;
        }
        /*.n{*/
        /*    color: gold !important;*/
        /*    text-decoration: underline !important;*/
        /*}*/
        .red{
            color: red;
        }

    </style>
</head>
<body>
<div class="p">
    <?php
    include 'nav.php'
    ?>
    <form action="postReg.php" method="post" onsubmit="return check()">
        <table border="1" align="center" style= "width: 95%;border-collapse: collapse;max-width: 500px;" cellpadding="10">
            <tr>
            <tr>
                <td align="right" >用户名</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" name="username" placeholder="请输入用户名">
                    </label>
                    <span class="red">*</span>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><label>
                        <input style="padding: 5px" type="password" name="pw" placeholder="只能由数字和字母组成">
                    </label><span class="red">*</span>
                </td>
            </tr>
            <tr>
                <td align="right" >重复密码</td>
                <td align="left"><label>
                        <input style="padding: 5px" type="password" name="cpw">
                    </label><span class="red">*</span>
                </td>
            </tr>
            <tr>
                <td align="right">性别</td>

                <td align="left">
                    <label>
                        <input style="..." type="radio" name="sex" value="男">男
                    </label>
                    <label>
                        <input style="..." type="radio" name="sex" value="女">女
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right" >信箱</td>
                <td align="left"><label>
                        <input style="padding:5px" name="email">
                    </label>
                </td>
            </tr>
            <tr>
                <td align="right">爱好</td>
                <td align="left">
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]">唱
                    </label>
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]">跳
                    </label>
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]">rap
                    </label>
                    <label>
                        <input style="padding: 5px" type="checkbox" name="fav[]">篮球
                    </label>
                </td>
            </tr>
            <tr><td align="right"><input type="submit"></td>
                <td align="left"><input type="reset"></td>
            </tr>
        </table>
    </form>
    <script>
        function check(){
            let username =document.getElementsByName('username')[0].value.trim()
            let usernameReg =/^[a-zA-Z0-9_\-@#*]{3,11}$/
            // console.log(username);
            // return false;
            if (!usernameReg.test(username)){
                alert("用户名认证.要求只能是字母, 数字长度3-11!")
                return false
            }
            let pw =document.getElementsByName('pw')[0].value.trim()
            let pwReg =/^[a-zA-Z0-9@#*_\-]{6,11}$/
            if (!pwReg.test(pw)){
                alert("密码只能是大小写字母，数字,-,_,*,长度为6-11!")
                return false
            }
            let cpw =document.getElementsByName('cpw')[0].value.trim()
            if (cpw !== pw){
                alert('密码必须相同！')
                return  false
            }
            let email =document.getElementsByName('email')[0].value.trim()
            let emailReg =/^[a-zA-Z0-9#\-_]+@([A-Za-z0-9\.])+(com|cn|net|org)$/;
            if (email){
                if (!emailReg.test(email)){
                    alert('信箱格式不正确！')
                    return false
                }
            }
        }
    </script>
</div>
</body>
</html>